<template>
  <div class="box">
    <el-container>
      <el-header>电影管理系统登录</el-header>
      <el-main>
        <!-- 表单域 -->
        <el-form :model="userinfo" ref="formLogin" label-width="80px">
          <el-form-item
            label="账号"
            prop="username"
            :rules="[
              { required: true, message: '账号不能为空' },
              // 手机号码
              //{pattern: /^a/,message: '如果不以以a开头则不合法', trigger: 'blur',},
            ]"
          >
            <el-input placeholder="账号" v-model="userinfo.username"></el-input>
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password"
            :rules="[{ required: true, message: '密码不能为空' }]"
          >
            <el-input
              v-model="userinfo.password"
              placeholder="密码"
              :show-password="true"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="dologin('formLogin')"
              >进入系统</el-button
            >
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userinfo: {
        username: "",
        password: "",
      },
    };
  },
  mounted() {},
  methods: {
    // 点击提交按钮时触发事件
    dologin(formName) {
      // this.$refs[formName].$el  ==> 真的子组件 dom
      // this.$refs[formName] 返回自定义组件的对象实例
      this.$refs[formName].validate((valid) => {
        // valid 验证成功返回true 验证失败返回false
        if (!valid) {
          // 验证不通过,提示
          this.$message.error("错了哦，这是一条错误消息");
          return;
        }
        // 发起ajax请求  后台进行用户的验证
        // axios发起的是一个json格式的post数据
        // axios写的是不是一个相对地址
        // 在vue项目 http://localhost:8080/api/login => 目标 localhost:3000/v1/api/login
        // then有两个参数，参数1只接受http状态为2x开头，参数2 请求有错的如http状态码4x开头等
        this.$axios.post("/api/login", this.userinfo).then(
          (res) => {
            // 登录成功，保存用户的token信息，token用户的登录状态
            // 答：vuex中存储token  vuex中有缺点，不能刷新，为了解决刷新问题sessionStorages(关闭浏览器数据就消除)
            // 存储vuex中
            this.$store.dispatch("setToken", res.data.data.token);
            // 存储到sessionStorage
            // sessionStorage.setItem('token',res.data.data.token)

            // 跳转到后台界面
            this.$router.push({ path: "/admin/index" });
          },
          (err) => {
            // 登录失败
            this.$message.error("账号或密码有误");
          }
        );
      });
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 800px;
  margin: 0 auto;
  .el-header {
    background-color: #b3c0d1;
    color: #fff;
    text-align: center;
    line-height: 60px;
    font-size: 30px;
    font-weight: bold;
  }
}
</style>
